<?php
require $this->__RAD__ . 'include/head.php';
?>
<body>

<?php
require $this->__RAD__ . 'include/header.php';
?>

<div class="join brand" style="background:url(<?= $this->__STATIC__ ?>/images/bg03.jpg) no-repeat center center /cover;">
    <div class="join-con01">
        <div class="wrapper">
            <div class="tit">
                阿拉丁板块
            </div>
            <h2>您是菁英，您是人才，欢迎来阿拉丁共同创建未来，携手阿拉丁共同成长！</h2>
            <p class="p">
                实力让我们引领行业：2009年，第一家“阿拉丁麻辣烫” 直营店正式开业，并凭借独一无二的口味风靡市场，<br>
                成功吸引众多慕名而来的加盟者与闻香而至的饕客。
            </p>
        </div>
    </div>
    <!--
    <div class="map">
        <a href="">点击查看详细信息</a>
        <img src="<?= $this->__STATIC__ ?>/images/map.png">
    </div>
    -->
    <div class="map">
        <div class="map-select">
            <div class="map-search clearfix">
                <a href="javascript:;" class="fh"><img src="<?= $this->__STATIC__ ?>/images/fh.png"></a>
                <a href="javascript:;" class="close"></a>
                <form>
                    <input type="text" placeholder="请输入区域">
                    <input type="button" value="提交查询">
                </form>
            </div>
            <div class="map-con">
                <h3><span>上海市</span>门店地址</h3>
                <div class="scroll-div">
                    <ul>
                        <li><b>南京西路店：</b>吴江路169号四季坊B1109号铺面</li>
                        <li><b>静安寺店：</b>虹井路188号B1-106</li>
                        <li><b>南京西路店：</b>吴江路169号四季坊B1109号铺面</li>
                        <li><b>静安寺店：</b>虹井路188号B1-106</li>
                        <li><b>南京西路店：</b>吴江路169号四季坊B1109号铺面</li>
                        <li><b>静安寺店：</b>虹井路188号B1-106</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="detail">
            美味哪里找<br>
            <img src="<?= $this->__STATIC__ ?>/images/dj.png">
        </div>

        <div id="china-map" style="height:800px;"></div>
    </div>
</div>
<?php
require $this->__RAD__ . 'include/footer.php';
?>
<?php
require $this->__RAD__ . 'include/right.php';
?>

</body>
</html>
<script type="text/javascript" src="<?= $this->__STATIC__ ?>js/common.js"></script>
<script type="text/javascript" src="<?= $this->__STATIC__ ?>js/echarts.js"></script>
<script type="text/javascript" src="<?= $this->__STATIC__ ?>js/china.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('china-map'));
    option = {
        animation: true,
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'cubicInOut',
        series: [
            {
                name: 'a',
                type: 'map',
                mapType: 'china',
                roam: false,//是否允许缩放
                label: { //地图省份名称
                    normal: { //默认
                        show: false, //默认不显示
                        position: 'inside' //显示在省份内
                    },
                    emphasis: { //经过
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#4d87c2',
                        borderWidth: 1,
                        borderColor: '#fff'
                    },
                    emphasis: {
                        areaColor: 'rgba(61,97,166,1)',
                        shadowColor: 'rgba(0, 0, 0, 0.5)',//阴影
                        shadowBlur: 20//阴影
                    }
                },
                data: [
                    {name: '北京',selected:true},
                    {name: '上海',selected:true},
                    {name: '江苏',selected:true},
                    {name: '浙江',selected:true}
                ]
            }
        ]
    };


    myChart.on('click', function(params) {
        //点击获取点击省份
        //在这里调取省份数据
        console.log(params);
        console.log(params.name);

        $('.ditu>img').each(function () {
            var _name=$(this).attr('data');
            if(_name==params.name){
                $('.map-select').show().find("h3 span").text(params.name);
                $('.ditu').show();
                $('.map .yy').show();
                $(this).show().siblings().hide();
            }
        })
    });
    myChart.setOption(option);
    $(function () {
        //关闭筛选框
        $('.close').click(function () {
            $('.map-select').hide();
            $('.map .yy').hide();
            $('.ditu').hide().find('img').hide();
        });
        $('.map-search input[type=button]').click(function () {
            $(".fh").show();
        });
        $('.fh').click(function () {
            $(this).hide();
            //清除搜索
        })


    });

</script>